<template>
  <div>
    <a-modal :visible="visible" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="1200px" :mask-closable="false">
      <template #title> {{ type == 'in' ? '调拨入库' : '调拨出库' }} </template>
      <div>
        <a-scrollbar style="overflow: auto; height: 100%">
          <div>
            <table class="my-table table-header">
              <colgroup>
                <col v-for="item of columns" :width="item.width" />
              </colgroup>
              <thead>
                <tr>
                  <th v-for="item of columns">
                    <div>{{ item.title }}</div>
                  </th>
                </tr>
              </thead>
              <!-- </div> -->
            </table>
          </div>
          <div v-for="item of list">
            <div class="item">
              <div class="right">
                <div class="right-box">
                  <div class="hd">
                    <span class="label">单号：</span>
                    <span>{{ item.billNo }}</span>
                  </div>
                  <div class="bd">
                    <span class="label">类型：</span>
                    <span>{{ filterTransType(item) }}</span>
                  </div>
                </div>
                <div class="right-box">
                  <div class="hd">
                    <span class="label">调出仓：</span>
                    <span>{{ item.outWarehouseName }}({{ item.outWarehouseCode }})</span>
                  </div>
                  <div class="bd">
                    <span class="label">调入仓：</span>
                    <span>{{ item.inWarehouseName }}({{ item.inWarehouseCode }})</span>
                  </div>
                </div>
                <div class="right-box">
                  <div class="hd">
                    <span class="label">创建人：</span>
                    <span>{{ item.createUname }}</span>
                  </div>
                  <div class="bd">
                    <span class="label">创建日期：</span>
                    <span>{{ $setTime(item.gmtCreate) }}</span>
                  </div>
                </div>
                <div class="right-box">
                  <div class="hd">
                    <span class="label">调拨数量：</span>
                    <span>{{ item.totalAmt }}</span>
                  </div>
                  <div class="bd">
                    <span class="label">调拨总金额：</span>
                    <span>{{ item.totalAmount }}</span>
                  </div>
                </div>
                <div class="right-box">
                  <div class="hd">
                    <span class="label">当前审核人：</span>
                  </div>
                  <div class="bd">{{ item.auditorName }} </div>
                </div>
                <div class="right-box">
                  <div class="hd">
                    <span class="label">备注：</span>
                    <span>{{ item.auditRemark }}</span>
                  </div>
                  <div class="bd">
                    <span class="label">状态：</span>
                    <span v-if="item.status == 1">草稿</span>
                    <span v-if="item.status == 2">待审核</span>
                    <span v-if="item.status == 3">完成</span>
                    <span v-if="item.status == 4">驳回</span>
                  </div>
                </div>
              </div>
            </div>
            <table v-if="item.isCollapse" class="tbody-con">
              <colgroup>
                <col v-for="item of columns" :width="item.width" />
              </colgroup>
              <tbody>
                <tr v-for="item1 of item.items" style="border-bottom: 1px solid #e5e6eb">
                  <td>
                    <div>
                      <div>{{ item.shopName }}</div>
                    </div>
                  </td>
                  <td>
                    <div>
                      <div style="height: 56px">
                        <ImgPopover :src="item1.productImg">
                          <template #con>
                            <a-image style="margin-top: 8px" width="40" height="40" fit="contain" :src="item1.productImg" />
                          </template>
                        </ImgPopover>
                        <!-- <a-image style="margin-top: 8px" width="40px" height="40px" :src="item1.productImg"></a-image> -->
                      </div>
                    </div>
                  </td>
                  <td>
                    <div>
                      <div style="padding-right: 10px">
                        <TextLimit position="top" :rows="1">{{ item1.productName }}</TextLimit>
                      </div>
                      <div>{{ item1.sku }}</div>
                    </div>
                  </td>
                  <td>
                    <div>
                      <div>{{ item1.msku }}</div>
                      <div>{{ item1.fnsku }}</div>
                    </div>
                  </td>
                  <td>
                    <div>
                      <div>{{ item1.spu }}</div>
                      <div>{{ item1.cateName }}</div>
                    </div>
                  </td>
                  <td>
                    <div>
                      <div>{{ item1.brandName }}</div>
                    </div>
                  </td>
                  <td>
                    <div>
                      <div>{{ item1.productType }}</div>
                    </div>
                  </td>
                  <td>
                    <div>
                      <div>{{ item1.amt }}</div>
                    </div>
                  </td>
                  <td>
                    <div>
                      <div>{{ item1.attribute == 'good' ? '良品' : '次品' }}</div>
                    </div>
                  </td>
                  <td>
                    <div>
                      <div>{{ item1.price }}</div>
                    </div>
                  </td>
                  <td>
                    <div>
                      <div>{{ item1.price * item1.amt }}</div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- </div> -->
        </a-scrollbar>
      </div>

      <template #footer>
        <a-button type="text" @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk" :loading="btnLoading">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { confirmInbound, confirmOutbound } from '@/api/warehouse'
  import { Message } from '@arco-design/web-vue'
  export default defineComponent({
    props: ['type', 'list'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data = reactive({
        columns: [
          { title: '店铺', dataIndex: 'name', width: '130px' },
          { title: '图片', dataIndex: 'name', width: '60px' },
          { title: '产品名称/SKU', dataIndex: 'name', width: '180px' },
          { title: 'MSKU/FNSKU', dataIndex: 'name', width: '180px' },
          { title: 'SPU/类目', dataIndex: 'name', width: '180px' },
          { title: '品牌', dataIndex: 'name', width: '110px' },
          // { title: '单位', dataIndex: 'name', width: 120 },
          { title: '产品类型', dataIndex: 'name', width: '110px' },
          { title: '数量', dataIndex: 'name', width: '140px' },
          { title: '仓库属性', dataIndex: 'name', width: '140px' },
          { title: '单位成本', dataIndex: 'name', width: '120px' },
          { title: '货值', dataIndex: 'name', width: '80px' },
          // { title: '上架货位', dataIndex: 'name', width: '120px' },
        ],
        btnLoading: false,
      })

      const open = () => {
        console.log(props.list)

        // getUserList()
        // if (props.remarkText) {
        //   data.form.remark = props.remarkText
        // }
      }
      const handleOk = async () => {
        let params: any = {
          confirmParams: [],
        }
        let res: any = {}
        props.list.forEach((e: any) => {
          let obj: any = {
            id: '',
            itemParams: [],
          }
          obj.id = e.id
          e.items.forEach((el: any) => {
            let itemObj = {
              itemId: el.id,
              // locationCode: props.type == 'in' ? el.inLocationCode : el.outLocationCode,
            }
            obj.itemParams.push(itemObj)
          })
          params.confirmParams.push(obj)
          console.log(params)
        })
        data.btnLoading = true
        if (props.type == 'in') {
          res = await confirmInbound(params)
        } else {
          res = await confirmOutbound(params)
        }
        if (res.code == 'SUCCESS') {
          props.type == 'in' ? Message.success('调拨入库成功') : Message.success('调拨出库成功')
          handleCancel()
          emit('save')
        }
        data.btnLoading = false
      }
      const handleCancel = () => {
        data.btnLoading = false
        visible.value = false
      }
      const filterTransType = (val: any) => {
        let text = ''
        switch (val.transType) {
          case 1:
            text = '国内仓-国内仓'
            break
          case 2:
            text = '国内仓-海外仓'
            break
          case 3:
            text = '海外仓-国内仓'
            break
          case 4:
            text = '海外仓-海外仓'
            break
          default:
            text = '未知'
            break
        }
        return text
      }
      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        filterTransType,
      }
    },
  })
</script>

<style lang="less" scoped>
  .icon-btn {
    font-size: 18px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .icon-btn-header {
    font-size: 18px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .arco-scrollbar-type-embed,
  .arco-scrollbar-both {
    width: 100% !important;
    height: calc(100% - 37px) !important;
  }

  .in-house-con {
    width: 100%;
    height: calc(100vh - @menuAndTabHeight);
    // background-color: white;
  }

  .search-con {
    // padding: 10px;
    box-sizing: border-box;
  }

  .line {
    width: 100%;
    height: 5px;
    background-color: #f0f2f5;
  }

  .label {
    // color: #9ca4ae;
  }

  .my-table {
    width: 1432px;
    min-height: 37px;
    text-align: left;
    font-size: 12px;
    background-color: #f2f3f5;
    line-height: 37px;
    overflow-y: auto;
  }

  .item {
    width: 1432px;
    height: 62px;
    // background-color: #d7d7d7;
    border-bottom: 1px solid #e5e6eb;
    display: flex;
    font-size: 12px;

    .left {
      width: 80px;
      height: 62px;
      position: relative;
    }
    .right {
      height: 62px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .right-box {
        width: 200px;
        .hd,
        .bd {
          width: 100%;
          height: 31px;
          line-height: 31px;
        }
        .btn {
          color: #169bd5;
          cursor: pointer;
          user-select: none;
          display: inline-block;
        }
      }
    }
  }

  .tbody-con {
    width: 100%;
    // height: 100%;
    text-align: left;
    table-layout: fixed;
    tr {
      &:nth-child(1) {
      }
      td {
        height: 56px;
        box-sizing: border-box;
        // border-right: 1px solid #e5e6eb;
      }
    }
  }
</style>
